<template>
  <div class="container">
    <el-menu :collapse="isCollapse" router default-active="list" class="el-menu-vertical-demo" @open="handleOpen"
      @close="handleClose">
      <div class="header">
        <Logo />
      </div>
      <!-- 诊所管理 -->
      <el-sub-menu Open index="clinic">
        <template #title>
          <el-icon>
            <House />
          </el-icon>
          <span>诊所管理</span>
        </template>
        <el-menu-item index="list"> 诊所信息 </el-menu-item>
        <el-menu-item index="doctor">医生信息</el-menu-item>
      </el-sub-menu>

      <!-- 保单管理 -->
      <el-sub-menu index="insurance">
        <template #title>
          <el-icon>
            <Document />
          </el-icon>
          <span>保单管理</span>
        </template>
        <el-menu-item index="bill">对账管理</el-menu-item>
        <el-menu-item index="policy">历史保单查询</el-menu-item>
      </el-sub-menu>

    </el-menu>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, watch } from "vue";
import {
  Document,
  House,
  Menu as IconMenu,
  Setting
} from "@element-plus/icons-vue";

import Logo from "./Logo.vue";

import useStore from "../store";

const isCollapse = computed(() => {
  const store = useStore();
  return store.isCollapse;
});

// const handleOpen = (key: string, keyPath: string[]) => {
//   // console.log(key, keyPath);
// };
// const handleClose = (key: string, keyPath: string[]) => {
//   // console.log(key, keyPath);
// };
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
}

.el-menu {
  border: none;
}

.header {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}


// 设置导航激活样式
.el-menu-item.is-active {
  border-radius: 20px;
  background-color: #F2F7FF;
}
</style>